<template>
	<view class="app-container">
		<scroll-view scroll-y="true" style="height: 100vh;">
			<view class="main">
				<view class="banner">
					<u-swiper height="179px" :list="imgList" @change="e => current = e.current" @click="handleClick(imgList[current])">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in imgList" :key="index"
								:class="[index === current && 'indicator__dot--active']">
							</view>
						</view>
					</u-swiper>
				</view>
				<view class="mall-list">
					<view class="list" v-for="item in goodslist" :key="item.id">
						<view class="list-mall">
							<view class="iamge">
								<u--image :showLoading="true" :src="item.img" width="120px" height="80px"></u--image>
							</view>
							<view class="right">
								<view class="title">
									{{item.days}}天{{item.count}}个
								</view>
								<view class="detail">
									<view class="remark">
										{{ item .detail }}
									</view>
								</view>
								<view class="price">
									<text>￥{{item.amount}}</text>
									<view class="list-btn" @click="handlePay(item.id)">
										立即购买
									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
		</scroll-view>
		<u-popup :show="show" closeable :round="10" mode="bottom" @close="close">
			<view class="popup">
				<view class="goods">
					<view class="g-list-mall">
						<view class="iamge">
							<u--image :showLoading="true" :src="goods.img" width="120px" height="80px"></u--image>
						</view>
						<view class="right">
							<view class="title">
								{{goods.days}}天{{goods.count}}个
							</view>
							<view class="detail">
								<view class="remark">
									{{ goods .detail }}
								</view>
							</view>
							<view class="price">
								￥{{goods.amount}}
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<text>请选择支付方式</text>
					<view class="icon">
						<u-icon @click="handelZFB" name="zhifubao-circle-fill" color="#2979ff" size="60"></u-icon>
						<u-icon @click="handelWX" name="weixin-circle-fill" color="#53e97b" size="60"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		goodslist,
		Order
	} from "@/api/mall.js"
	import {listBanner} from "@/api/home.js"
	export default {
		data() {
			return {
				goodslist: [],
				show: false,
				goods: {},
				type: 1, //1-支付宝 2-微信
				imgList: [],
				current: 0,
				bannerList: [],
			}
		},
		onShow() {
			this.getList()
			this.getListBanner()
		},
		methods: {
			close() {
				this.show = false
			},
			handelWX() {
				// console.log(this.goods);
				Order({
					vpnId: this.goods.id,
					payType: 2
				}).then(res => {
					this.ovider(res.body, "wxpay")
				})
				this.close()
			},
			handelZFB() {
				Order({
					vpnId: this.goods.id,
					payType: 1
				}).then(res => {
					// console.log(res);
					this.ovider(res.body, "alipay")
				})
				this.close()
			},
			handlePay(id) {
				this.show = true;
				this.goods = this.goodslist.find(item => item.id == id)
			},
			getList() {
				goodslist().then(res => {
					// console.log(res);
					if (res.length > 0) {
						this.goodslist = res
					} else {
						this.goodslist = []
					}
				})
			},
			getListBanner() {
				this.imgList = []
				listBanner().then(res => {
					// console.log(res);
					this.bannerList = res
					res.forEach(item => {
						this.imgList.push(item.imgBanner)
					})
				})
			},
			handleClick(index) {
				let list = this.bannerList.find(item => item.imgBanner == index)
				let url = list.imgUrl
				console.log(url);
				if (!url) return
				if (url.indexOf("https://") != -1 || url.indexOf("http://") != 1) {
					url = "https://" + url
				} else {
					url = url
				}
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(url);
				// #endif
			},
			ovider(body, provider) {
				var orderInfo = ''; //从服务器获取的订单
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						// console.log(res)
						// console.log(res.provider)
						if (~res.provider.indexOf(provider)) {
							uni.requestPayment({
								"provider": provider, //固定值为"alipay"
								"orderInfo": body, //此处为服务器返回的订单信息字符串
								success: function(res) {
									console.log(res)
									var rawdata = JSON.parse(res.rawdata);
									console.log(rawdata);
									// console.log("支付成功");
									uni.showToast({
										title: '支付成功',
										icon:"error",
										duration: 2000
									});
								},
								fail: function(err) {
									console.log('支付失败:', err);
									uni.showToast({
										title: '您已取消支付',
										icon:"error",
										duration: 2000
									});
								}
							});
						}
					},
					fail:function(res){
						console.log(res)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #031335;
		background: url("@/static/image/12.jpg") no-repeat;
		background-size: 100% 100%;
	}

	* {
		box-sizing: border-box;
	}

	.main {
		padding: 0px 15px;
	}
	
	.mall-list{
		margin-top: 20px;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
		// outline: 1px solid red;
	}

	.list {
		// width: 49%;
		padding: 7px 10px;
		// background: #f9f9f9;
		margin-bottom: 10px;
		color: #fff;
		border: 2px solid #227ace;
		border-radius: 10px;
	}

	.list-mall {
		display: flex;

		.iamge {
			padding: 5px;
			border-radius: 4px;
		}

		.right {
			flex: 1;
			margin-left: 8px;

			.title {
				font-weight: bold;
			}

			.detail {
				height: 30px;
			}

			.remark {
				margin-top: 5px;
				font-size: 13px;
				color: #8F9BB3;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.price {
				margin-top: 5px;
				color: #FF3D71;
				display: flex;
				// align-items: flex-end;
				justify-content: space-between;
			}
		}
	}

	.list-btn {
		padding: 3px 10px;
		// margin-top: 6px;
		// border-top: 1rpx solid #d1d1d1;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		border: none;
		background-image: linear-gradient(to right, #38dde5, #1891d6);
	}
	
	.popup {
		padding: 20px;
	}

	.goods {
		margin-top: 20px;
		display: flex;
		// outline: 1px solid red;

		.g-list-mall {
			display: flex;

			.iamge {
				padding: 5px;
				background-color: #d1d1d1;
				border-radius: 4px;
				// outline: 1px solid red;
				// background-image: linear-gradient(45deg, rgba(56,221,229,0.5), rgba(24,145,214,0.5));
			}

			.right {
				margin-left: 8px;

				.title {
					font-weight: bold;
				}

				.detail {
					height: 35px;
				}

				.remark {
					margin-top: 5px;
					font-size: 13px;
					color: #8F9BB3;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price {
					margin-top: 5px;
					color: #FF3D71;
					
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.bottom {
		margin-top: 20px;
		height: 150px;

		.icon {
			margin-top: 40px;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}
	
	.banner {
		margin-top: 10px;
		height: 220px;
		padding: 10px;
		background: url("@/static/image/ads_bg.png") no-repeat;
		background-size: 100% auto;
	
		.indicator {
			@include flex(row);
			justify-content: center;
			// outline: 1px solid red;
	
			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;
	
				&--active {
					background-color: #ffffff;
				}
			}
		}
	}
</style>
